<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>

function checkTime(i) {
	if (i < 10) {
		i = "0" + i;
	}
	return i;
}

var myTimer = null;

function updateDate() {

	var date = new Date();
	var hours = checkTime(date.getHours());
	var minutes = checkTime(date.getMinutes());
	var seconds = checkTime(date.getSeconds());


	var hStyle = "display: inline-block;width:150; height:150; position:absolute; left:4px;-webkit-transform:rotate(" + (((hours % 12) * 30) + (minutes / 2)) + "deg);";
	document.getElementById("h").setAttribute("style", hStyle);
	var mStyle = "display: inline-block;width:150; height:150; position:absolute; left:4px;-webkit-transform:rotate(" + ((minutes * 6) + (seconds / 10)) + "deg);";
	document.getElementById("m").setAttribute("style", mStyle);
	var sStyle = "display: inline-block;width:150; height:150; position:absolute; left:4px;-webkit-transform:rotate(" + (seconds * 6) + "deg);";
	document.getElementById("s").setAttribute("style", sStyle);

	myTimer = setTimeout(updateDate, 1000);
}

</script>
</head>

<body onload="updateDate()">
	<img class="base-flip" style="display: inline-block;width:150; height:150; position:absolute; left:4px;" id="clock" src="icons/clock.png">
	<img class="base-flip" style="display: inline-block;width:150; height:150; position:absolute; left:4px;-webkit-transform:rotate(0deg);" id="h" src="icons/h.png">
	<img class="base-flip" style="display: inline-block;width:150; height:150 position:absolute; left:4px;-webkit-transform:rotate(0deg);" id="m" src="icons/m.png">
	<img class="base-flip" style="display: inline-block;width:150; height:150 position:absolute; left:4px;-webkit-transform:rotate(0deg);" id="s" src="icons/s.png">
</body>
</html>